<template>
  <div class="home">
     <button @click="optionChangeName('小红')">option修改name</button>
     <h2>Store Name: {{ $store.state.name }}</h2>
     <h2>message: {{ message }}</h2>
     <button @click="changeInfo({name: '王二',level: 200})">修改info</button>
     <h2>Level: {{ $store.state.level }}</h2>
     <button @click="changeName">setup修改name</button>
     <button @click="incrementLevel">setup修改level</button>
  </div>
</template>

<!--option中使用mapGetters-->
<script>
  import {CHANGE_INFO} from '../store/mutation_type.js'
  import { mapMutations } from 'vuex'
  export default {
    methods: {
      btnClick() {
        console.log("click")
      },
      ...mapMutations(['optionChangeName', CHANGE_INFO])


      // 不使用mapMutations的方式
      //optionChangeName() {
        // this.$store.state.name = 'kobe' // 不推荐直接修改state中的数据
        // this.$store.commit('optionChangeName', 'optionKobe')
      //   // console.log(this.$store.state.name)
      // },
      // 可以传递对象
      // changeInfo(){
      //   this.$store.commit('changeInfo', {name: '王二',level: 200})
      //   console.log(this.$store.state.level)
      // },
      // 使用常量类型
      // changeInfo(){
      //   this.$store.commit( CHANGE_INFO, {name: '王二',level: 200})
      //   console.log(CHANGE_INFO)
      //   console.log(this.$store.state.level)
      // }
      
    }
  }
</script>

<!--setup中使用mapGetters-->
<script setup>
  import { useStore,mapState, mapGetters, mapMutations } from 'vuex'
  import { toRefs } from 'vue'
  import { computed } from "vue";
  import useState from "../hooks/useState.js";
  import { CHANGE_INFO } from '../store/mutation_type.js'

  const store = useStore()
  // 使用mapMutations方式
  // mapMutations 在 <script setup> 中使用错误，没有绑定正确的上下文
  // mapMutations 是一个工具函数，返回的是一个对象，该对象包含了与 Vuex store 的 mutation 相对应的函数。在 Vue 3 中，<script setup> 语法糖不支持直接使用 mapMutations，因为 mapMutations 返回的是一个对象，而 <script setup> 语法糖不支持直接使用对象解构。
  // const {changeName, incrementLevel} = mapMutations(['changeName', 'incrementLevel']) // 报错 TypeError: Cannot read properties of undefined (reading 'commit'),
  // 使用如下方式解决
  const mutations = mapMutations(['changeName', 'incrementLevel'])
  // console.log(mutations)
  const newMutations = {}
  Object.keys(mutations).forEach(key => {
    // console.log(key)
    // console.log('----------------------------------------')
    // console.log(mutations[key])
    newMutations[key] = mutations[key].bind({ $store: store})
  })
  const {changeName, incrementLevel} = newMutations


  // 不使用mapMutations的方式
  //const {message, level} = toRefs(store.getters) // [Vue warn] toRefs() expects a reactive object but received a plain one  [Vue 警告] toRefs（） 期望一个响应式对象，但收到了一个普通对象
  // const message = computed(() => store.getters.message) // 使用computed包装,使其变成响应式对象

  // function changeName() {
  //   // store.state.name = 'kobe' // 不推荐直接修改state中的数据
  //   store.commit('changeName', 'setupKobe')
  //   console.log(store.state.name)
  // }
</script>

<style scoped>
</style>